import React from 'react';
import { Button } from 'antd';
import { observer, inject } from 'mobx-react';
import LineTable from './components/lineTable';
import BarTable from './components/barTable';
import PieTable from './components/pieTable';
import ScatterTable from './components/scatterTable';
import { Row, Col } from 'antd';
import style from './style.less';

@inject( 'state', 'actions' )
@observer
class DashBoard extends React.Component {


    componentWillUpdate() {
        console.log( 123456 )
    }

    componentWillMount() {
        console.log( 'will mounted' )
    }

    componentDidMount() {
        console.log( 'mounted' )
    }

    render() {
        console.log( this.props )
        const {state, actions} = this.props;
        return (
            <div>
                <Row>
                    <Col xs={24} sm={24} md={12} lg={6} xl={6} className={style.colTable}>
                        <LineTable></LineTable>
                    </Col>
                    <Col xs={24} sm={24} md={12} lg={6} xl={6} className={style.colTable}>
                        <BarTable></BarTable>
                    </Col>
                    <Col xs={24} sm={24} md={12} lg={6} xl={6} className={style.colTable}>
                        <PieTable></PieTable>
                    </Col>
                    <Col xs={24} sm={24} md={12} lg={6} xl={6} className={style.colTable}>
                        <ScatterTable></ScatterTable>
                    </Col>
                </Row>

                {/*<p>a:{state.a}</p>*/}
                {/*<Button type="primary" onClick={actions.add}>+</Button>*/}
                {/*<Button type="primary" onClick={actions.reduce}>-</Button>*/}
                {/*<p>b:{state.b}</p>*/}
            </div>
        )
    }
}

export default DashBoard;